<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css"/>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<%@include file="/WEB-INF/modal-admin-confirm.jsp"%>
<script type="text/javascript">

	$(function(){
		// 调用后面声明的函数对页码导航条进行初始化操作
		initPagination();
		
		//给全选绑定单击事件
		$("#summaryBox").click(function(){
			// ①获取当前多选框自身的状态
			var currentStatus = this.checked;
			
			// ②用当前多选框的状态设置其他多选框
			$(".itemBox").prop("checked", currentStatus);
			
		});
		
		//判断全选/全不选
		$(".itemBox").click(function(){
			var checkedBoxCount = $(".itemBox:checked").length;
			var totalCount = $(".itemBox").length;
			$("#summaryBox").prop("checked",checkedBoxCount==totalCount);
		});
		
		//批量删除数据
		$("#batchRemoveBtn").click(function(){
			var adminArray = [];
			$(".itemBox:checked").each(function(){
				var adminId = this.id;
				
				var adminName = $(this).parent().next().text();
				adminArray.push({
					"adminId":adminId,
					"adminName":adminName
				});
			});
			//未选择给出提示
			if($(".itemBox:checked").length==0){
				layer.msg("请选择至少一条数据进行删除！");
			}
			//显示删除数据
			showConfirmModal(adminArray);
		});
		
		//删除确定
		function showConfirmModal(adminArray) {
			
			// 打开模态框
			$("#confirmModal").modal("show");
			
			// 清除旧的数据
			$("#adminNameDiv").empty();
			
			// 在全局变量范围创建数组用来存放角色id
			window.adminIdArray = [];
			
			// 遍历adminArray数组
			for(var i = 0; i < adminArray.length; i++) {
				var admin = adminArray[i];
				var adminName = admin.adminName;
				$("#adminNameDiv").append(adminName+"<br/>");
				
				var adminId = admin.adminId;
				// 调用数组对象的push()方法存入新元素
				window.adminIdArray.push(adminId);
			}
			
		}
		
		//执行删除
		$("#delAdminBtn").click(function(){
			// 从全局变量范围获取adminIdArray，转换为JSON字符串
			var ids = JSON.stringify(window.adminIdArray);
			
			$.ajax({
				"url":"admin/remove/by/id/array.json",
				"data":ids,
				"type":"post",
				"contentType":"application/json;charset=UTF-8",
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("操作成功！");
						//initPagination();
						window.location.href = "admin/get/page.html"
					}
					if(result=="FAILED"){
						layer.msg("操作失败！"+response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
				
			});

			// 关闭模态框
			$("#confirmModal").modal("hide");
			//将全选框置为未选择状态
			$("#summaryBox").prop("checked",false);
			
		});
		
		
		
		
	});
	
	// 生成页码导航条的函数
	function initPagination(){
		// 获取总记录数
		var totalRecord = ${requestScope.pageInfo.total};
		
		// 声明一个JSON对象存储Pagination要设置的属性
		var properties = {
			num_edge_entries: 3,								// 边缘页数
			num_display_entries: 5,								// 主体页数
			callback: pageSelectCallback,						// 指定用户点击“翻页”的按钮时跳转页面的回调函数
			items_per_page: ${requestScope.pageInfo.pageSize},	// 每页要显示的数据的数量
			current_page: ${requestScope.pageInfo.pageNum - 1},	// Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
			prev_text: "上一页",									// 上一页按钮上显示的文本
			next_text: "下一页"									// 下一页按钮上显示的文本
		};
		
		// 生成页码导航条
		$("#Pagination").pagination(totalRecord, properties);
	};
	// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
	// pageIndex是Pagination传给我们的那个“从0开始”的页码
	function pageSelectCallback(pageIndex, jQuery) {
		
		// 根据pageIndex计算得到pageNum
		window.pageNum = pageIndex + 1;
		
		// 跳转页面
		window.location.href = "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";
		
		// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
		return false;
	}
	
	
</script>
<body>

	<%@ include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<%@ include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="glyphicon glyphicon-th"></i> 数据列表
						</h3>
					</div>
					<div class="panel-body">
						<form action="admin/get/page.html" method="post" class="form-inline" role="form" style="float: left;">
							<div class="form-group has-feedback">
								<div class="input-group">
									<div class="input-group-addon">查询条件</div>
									<input name="keyword" value="${keyword}" class="form-control has-success" type="text"
										placeholder="请输入查询条件">
								</div>
							</div>
							<button type="submit" class="btn btn-warning">
								<i class="glyphicon glyphicon-search"></i> 查询
							</button>
							<!--给页面标签设置权限  -->
						<security:authorize access="hasRole('用户经理')">
							<button type="button" id="batchRemoveBtn" class="btn btn-danger"
								style="float: right; margin-left: 10px;">
								<i class=" glyphicon glyphicon-remove"></i> 删除
							</button>
						
							<a href="admin/to/add/page.html" class="btn btn-primary"
								style="float: right;" onclick="window.location.href='add.html'">
								<i class="glyphicon glyphicon-plus"></i> 新增
							</a>
						</security:authorize>
						<br>
						<hr style="clear: both;">
						<div class="table-responsive">
							<table class="table  table-bordered">
								<thead>
									<tr>
										<th width="30">#</th>
										<th width="30"><input id="summaryBox" type="checkbox"></th>
										<th>账号</th>
										<th>名称</th>
										<th>邮箱地址</th>
										<th width="250">操作</th>
									</tr>
								</thead>
								<tbody>
									<c:if test="${empty requestScope.pageInfo.list }">
										<tr>
											<td colspan="6" align="center">抱歉！没有查询到您要的数据！</td>
										</tr>
									</c:if>
									<c:if test="${!empty requestScope.pageInfo.list }">
										<c:forEach items="${requestScope.pageInfo.list }" var="admin" varStatus="myStatus">
											<tr>
												<td>${myStatus.count }</td>
												<td><input id="${admin.id }" class="itemBox" type="checkbox"></td>
												<td>${admin.loginAcct }</td>
												<td>${admin.userName }</td>
												<td>${admin.email }</td>
												<td>
													<a href="assign/to/assign/role/page.html?adminId=${admin.id }&pageNum=${requestScope.pageInfo.pageNum}&keyword=${param.keyword}" class="btn btn-success btn-xs">
														<i class=" glyphicon glyphicon-check"></i>分配角色
													</a>
													<a href="admin/getAdmin/page.html?adminId=${admin.id }" class="btn btn-success btn-xs">
														<i class=" glyphicon glyphicon-search"></i>查看
													</a>
													<security:authorize access="hasRole('用户经理')">
														<a href="admin/to/edit/page.html?adminId=${admin.id }&pageNum=${requestScope.pageInfo.pageNum}" class="btn btn-primary btn-xs">
															<i class=" glyphicon glyphicon-pencil"></i>编辑
														</a>
														<a id = "rid" href="admin/remove/${admin.id }/${requestScope.pageInfo.pageNum}.html" class="btn btn-danger btn-xs">
															<i class=" glyphicon glyphicon-remove"></i>删除
														</a>
													</security:authorize>
												</td>
											</tr>
										</c:forEach>
									</c:if>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="6" align="center">
											<div id="Pagination" class="pagination">
												<!-- 这里显示分页 -->
											</div>
										</td>
									</tr>

								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>